<template>
    <el-card shadow="never" style="max-height: 70vh; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled/>
            </el-form-item>
            <el-form-item label="租户ID:" prop="tenant_id" v-if="false">
                <el-input-number v-model="form.tenant_id" :step="1" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="医院ID:" prop="hiospital_id" v-if="false">
                <el-input-number v-model="form.hiospital_id" :step="1" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="医生ID:" prop="doctor_id" v-if="false">
                <el-input-number v-model="form.doctor_id" :step="1" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="周几:" prop="week_day">
                <el-select v-model="form.week_day" placeholder="请选择星期几">
                    <el-option v-for="(el, idx) in weekOptions" :key="idx" :value="el.value"
                               :label="el.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始时间:" prop="start_time">
                <el-time-picker
                    v-model="form.start_time" value-format="HH:mm:ss"
                    :picker-options="{
                          selectableRange: '00:00:00 - 23:59:59'
                        }"
                    placeholder="选择开始时间">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="结束时间:" prop="end_time">
                <el-time-picker
                    v-model="form.end_time" value-format="HH:mm:ss"
                    :picker-options="{
                          selectableRange: '00:00:00 - 23:59:59'
                        }"
                    placeholder="选择结束时间">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="longitude:" prop="longitude" v-if="false">
                <el-input-number v-model="form.longitude" :step="0.00001" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="出诊地址:" prop="address">
                <div class="flex">
                    <el-input v-model="form.address" placeholder="请输入出诊地址" clearable/>
                    <el-button type="primary" style="margin-left: 10px;" @click="$refs.location.handleMap(form)" :disabled="false">
                        选择地址
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item label="latitude:" prop="latitude" v-if="false">
                <el-input-number v-model="form.latitude" :step="0.00001" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确认</el-button>
                <el-button type="warning" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
        <JSelectLocation ref="location" @ok="onLocationOK"></JSelectLocation>
    </el-card>
</template>

<script>
import {regionData} from 'element-china-area-data'

export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        doctorId: {
            type: Number,
            default: 0
        },
        weekOptions: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                week_day: [{required: true, message: "请输入周几", trigger: "blur"}],
            },
            form: {},
            // 区域选择配置
            areaOptions: regionData
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) !== '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', {
                        ...this.form,
                        doctor_id: this.doctorId
                    })
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onLocationOK(obj) {
            this.form = {
                ...this.form,
                ...obj
            }
        }
    }
}
</script>
